<template>
	<view>
		<view class="viewbox">
			<view class="viewitem">
				<view class="selectitem" v-for="(item,index) in navlist" :key="index" @click="handlenav(index)"
					:style="{'color':navindex==index?'#FFF':'#222','background':navindex==index?'#F94D29':'#f2f2f2'}">
					{{item}}
				</view>
			</view>
		</view>
		<view class="navbox" v-if="navindex==0">
			<view class="selectbox">
				<uni-data-select v-model="value" :localdata="range" @change="change" :clear="false"></uni-data-select>
			</view>
			<view class="listitem" v-for="(item,index) in list" :key="index" @click="changetype(item)"
				:style="{'color':item.id==status?'#F94D29':''}">
				{{item.title}}
				<view class="tit"
					:style="{'background':item.id==status?'linear-gradient(90deg, #F94D29 0%, #F99529 100%)':''}">
				</view>
			</view>
		</view>
		<view style="height: 180rpx;"></view>
		<view class="couponbox" v-if="navindex==0" v-for="(item,index) in couponlist" :key="index">
			<view class="couponlist">
				<view class="leftbox">
					<!-- //coupon_type==1 coupon_money满减劵 coupon_type==2 折扣劵 -->
					<view style="margin-top: 60rpx;text-align: center;" v-if="item.coupon_type==1||item.coupon_type==3">
						<text style="font-size: 32rpx;">￥</text>
						<text v-if="item.coupon_type==1">{{item.coupon_money}}</text>
						<text v-if="item.coupon_type==3">{{item.coupon_money}}</text>
					</view>
					<view style="margin-top: 60rpx;text-align: center;" v-if="item.coupon_type==2">
						<text style="font-size: 32rpx;">{{parseFloat(item.discount_percent/10)}}折</text>
					</view>
				</view>
				<view class="rightbox">
					<!-- status 0未使用 1已到期 2已使用 -->
					<!-- <image class="expire" src="../../static/gq.png"></image> -->
					<view class="coupontype">
						<!-- //use_type1全平台 2商城 3外卖 4商户 5停车场  6指定商品 -->
						<text v-if="item.use_type==1">全平台可用</text>
						<text v-if="item.use_type==2">商城可用</text>
						<text v-if="item.use_type==3">外卖可用</text>
						<text v-if="item.use_type==4">商户可用</text>
						<text v-if="item.use_type==5">停车场可用</text>
						<text v-if="item.use_type==6">指定商品可用</text>
						<!-- //coupon_type==1 coupon_money满减劵 coupon_type==2 折扣劵 -->
						<!-- {{item.use_type==1?'全平台可用':item.use_type==2?'商城可用':'外卖可用'}} -->
					</view>
					<view class="rule">{{item.coupon_name}}</view>
					<view class="time">
						<view>到期时间：{{dateFormat(item.expire_time)}}</view>
						<view class="butbox" v-if="item.status==0" @click="tousercoupon(item)">去使用</view>
					</view>
				</view>
			</view>
			<view class="collapse">
				<uni-collapse>
					<uni-collapse-item title="使用须知" :show-animation="true">
						<view class="content">
							<text class="text">{{item.ship_note}}</text>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>
		
		<kong v-if="couponlist.length==0&&navindex==0"></kong>

		<view class="navbox" v-if="navindex==1">
			<view class="listitem" v-for="(item,index) in statuslist" :key="index" @click="changevoucher(item)"
				:style="{'color':item.id==voucherstatus?'#F94D29':''}">
				{{item.title}}
				<view class="tit"
					:style="{'background':item.id==voucherstatus?'linear-gradient(90deg, #F94D29 0%, #F99529 100%)':''}">
				</view>
			</view>
		</view>
		<view v-if="navindex==1" class="listbox" v-for="(item,index) in voucherlist" :key="index">
			<view class="infobox">
				<view class="leftbox">
					<view class="namebox">{{item.voucher_money}}代{{item.usable_money}} 元代金券</view>
					<view>
						<text>{{item.holidays_use==0?'节假日不可用':'节假日可用'}}</text>
						<text>,{{item.weekend_use==0?'周末不可用':'周末可用'}}</text>
					</view>
					<view style="margin-top: 10rpx; " v-if="voucherstatus==1||voucherstatus==3">核销时间：{{dateFormat(item.check_time)||''}}</view>
				</view>
				<!-- <view class="rightbox">
					已售{{item.voucher_num-item.shenyu_num}}
				</view> -->
			</view>
			<view class="pricebox">
				<view class="redbox">
					<view>￥{{item.voucher_money}}</view>
					<!-- <view class="linebox">{{(item.usable_money*100/item.voucher_money*100)/100}}9.5折</view> -->
				</view>
				<view class="namebox">
					{{item.merch_name}}
				</view>
				<view class="butbox" @click="touser(item)">
					去核销
				</view>
			</view>
		</view>
		<kong v-if="list.length==0&&loading&&navindex==1"></kong>
		<uni-popup ref="popup" type="center">
			<view class="hide_ewm">
				<image class="shut" src="../../static/gb.png" @click="closen()"></image>
				<!-- <view class="title_box">请营业时间内到店核销</view> -->
				<!-- <view class="line"></view> -->
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
					@scrolltolower="lower" @scroll="scroll">
					<view class="scroll-view-item">
						<image v-for="(item,index) in codeimg" :key="index" :src="item" class="ewm"></image>
					</view>
				</scroll-view>

				
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import kong from '../../components/kong.vue'
	export default {
		components: {
			kong
		},
		data() {
			return {
				navlist: ['优惠卷', '代金卷'],
				value: 0,
				range: [{
						value: 1,
						text: "全平台"
					},
					{
						value: 2,
						text: "商城"
					},
					{
						value: 3,
						text: "外卖"
					},
				],
				list: [{
						id: 0,
						title: '未使用'
					},
					{
						id: 2,
						title: '已到期'
					}, {
						id: 1,
						title: '已使用'
					}
				],
				currindex: '', //选中的索引
				couponlist: [],
				use_type: '',
				status: '',
				navindex: 0,
				loading: false,
				voucherlist: [],
				voucherstatus: '', //使用状态 0未使用 1已核销 2已过期 3部分核销
				statuslist: [{
						id: 0,
						title: '未使用'
					},
					{
						id: 2,
						title: '已过期'
					}, {
						id: 1,
						title: '已核销'
					},
					{
						id: 3,
						title: '部分核销'
					}
				],
				isShowEwm: false, //核销码弹窗
				codeimg: [], //核销码
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		onLoad() {
			this.getlist()
			this.getvoucherlist()
		},
		methods: {
			handlenav(index) {
				this.navindex = index
			},
			dateFormat: function(value) {
				var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var sdate = ("0" + date.getDate()).slice(-2);
				var hour = ("0" + date.getHours()).slice(-2);
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = year + "-" + month + "-" + sdate + " " + hour + ":" + minute + ":" + second;
				// 返回
				return result;
			},
			change(e) {
				console.log("e:", e);
				this.use_type = e
				this.getlist()
			},
			getvoucherlist() {
				// use_type  使用范围 1全平台 2商城 3外卖 
				// coupon_type  类型 1满减券 2折扣券 3现金券 
				this.$http({
					url: 'api/Wechat/user_voucher',
					data: {
						status: this.voucherstatus, //使用状态 0未使用 1已核销 2已过期 3部分核销
					}
				}).then(res => {
					this.voucherlist = res.data
					if (this.voucherlist.length == 0) {
						this.loading = true
					} else {
						this.loading = false
					}

				})
			},
			//选中未使用、已使用
			changetype(item) {
				this.status = item.id
				this.getlist()
			},
			changevoucher(item) {
				this.voucherstatus = item.id
				this.getvoucherlist()
			},
			getlist() {
				this.$http({
					url: 'api/Wechat/user_coupon',
					data: {
						status: this.status, //0未使用 2已到期 1已使用
						use_type: this.use_type, //1全平台 2商城 3外卖
					}
				}).then(res => {
					this.couponlist = res.data
				})
			},
			touser(item) {
				this.codeimg = item.codes
				this.$refs.popup.open('center')
				// this.isShowEwm = true
				// uni.navigateTo({
				// 	url:'/pageshop/storeinfo/storeinfo?id='+item.merch_id
				// })
			},
			closen(){
				this.$refs.popup.close()
			},
			tousercoupon(item) {
				//use_type 1全平台 2商城 3外卖
				uni.switchTab({
					url: '/pages/index/index'
				})
				// if (item.use_type == 1) {
				// 	uni.switchTab({
				// 		url: '/pages/index/index'
				// 	})
				// }
				// if (item.use_type == 2) {
				// 	uni.switchTab({
				// 		url: '/pages/goodgoods/goodgoods'
				// 	})
				// }
				// if (item.use_type == 3) {
				// 	uni.navigateTo({
				// 		url: '/pageshop/takeout/takeout'
				// 	})
				// } else {
				// 	uni.switchTab({
				// 		url: '/pages/index/index'
				// 	})
				// }
			},
		}
	}
</script>

<style lang="scss" scoped>
	.viewbox {
		width: 750rpx;
		height: 86rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 10rpx 10rpx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 9;

		.viewitem {
			width: 500rpx;
			height: 60rpx;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			background-color: #f2f2f2;
			font-size: 28rpx;
			margin: 0 auto;

			.selectitem {
				width: 50%;
				height: 60rpx;
				text-align: center;
				background-color: #f2f2f2;
				color: #222222;
				border-radius: 30rpx;
				line-height: 60rpx;
			}
		}
	}

	.navbox {
		width: 750rpx;
		height: 86rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 10rpx 10rpx;
		display: flex;
		align-items: center;
		position: fixed;
		top: 86rpx;
		z-index: 9;

		.selectbox {
			width: 218rpx;
			height: 87rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;

			.sanjiao {
				width: 0;
				height: 0;
				border-left: 10rpx solid transparent;
				border-right: 10rpx solid transparent;
				border-bottom: 10rpx solid #F94D29;
				margin-left: 10rpx;
			}
		}

		.listitem {
			width: 276rpx;
			text-align: center;
			position: relative;
			height: 87rpx;
			line-height: 87rpx;

			.tit {
				position: absolute;
				width: 84rpx;
				left: 50%;
				transform: translate(-50%, 0);
				bottom: 0;
				height: 4rpx;
				background: #FFF;
				border-radius: 2rpx;
			}
		}
	}
	.couponbox{
		width: 690rpx;
		margin: 32rpx auto 0 auto;
	}

	.couponlist {
		width: 690rpx;
		height: 172rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 12rpx 2rpx rgba(249, 149, 41, 0.16);
		border-radius: 12rpx;
		display: flex;
		// margin: 32rpx auto 0 auto;
		align-items: center;

		.leftbox {
			width: 164rpx;
			height: 172rpx;
			background: #FEF9E6;
			box-shadow: 0rpx 2rpx 12rpx 2rpx rgba(249, 149, 41, 0.09);
			border-radius: 12rpx;
			font-size: 32rpx;
			font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
			font-weight: normal;
			color: #FE5326;
		}

		.rightbox {
			padding: 0 20rpx;
			width: 526rpx;
			height: 172rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 12rpx 2rpx rgba(249, 149, 41, 0.16);
			border-radius: 12rpx;
			position: relative;

			.expire {
				width: 84rpx;
				height: 83rpx;
				position: absolute;
				top: 0;
				left: 45%;
			}

			.rule {
				width: 350rpx;
				-webkit-line-clamp: 1;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 34rpx;
				font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
				font-weight: normal;
				color: #222222;
				margin: 25rpx 0 20rpx 0;
			}

			.time {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
				font-weight: normal;
				color: #555555;

				.butbox {
					width: 126rpx;
					height: 54rpx;
					border-radius: 28rpx;
					border: 2rpx solid #F94D29;
					line-height: 54rpx;
					text-align: center;
					font-size: 28rpx;
					font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
					font-weight: normal;
					color: #F94D29;
				}
			}

			.coupontype {
				position: absolute;
				top: 0;
				right: 0;
				width: 186rpx;
				height: 50rpx;
				background: linear-gradient(90deg, #fde4c8 0%, #FCE0B8 55%, #fde4c8 100%);
				border-radius: 0rpx 12rpx 0rpx 12rpx;
				font-size: 28rpx;
				font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
				font-weight: normal;
				color: #83431F;
				text-align: center;
				line-height: 50rpx;
			}
		}
	}
	.collapse{
		margin-top: 10rpx;
		.content {
				padding: 15rpx 30rpx;
				border-radius: 15rpx;
			}
		
			.text {
				margin: 0 auto;
				font-size: 26rpx;
				color: #666;
				border-radius: 15rpx;
				// line-height: 20rpx;
			}
	}

	.listbox {
		width: 650rpx;
		margin: 0 auto;
		background-color: #FFF;
		padding: 20rpx;
		margin-top: 20rpx;
		border-radius: 16rpx;

		.infobox {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.leftbox {
				font-size: 26rpx;
				font-weight: 300;
				color: #555555;

				.namebox {
					font-size: 30rpx;
					font-weight: 500;
					color: #222222;
					margin-bottom: 10rpx;
				}
			}

			.rightbox {
				font-size: 28rpx;
				font-weight: 300;
				color: #666666;
			}
		}

		.pricebox {
			display: flex;
			margin-top: 10rpx;
			justify-content: space-between;
			align-items: center;

			.redbox {
				display: flex;
				align-items: center;
				color: red;

				.linebox {
					border: solid red 2rpx;
					width: fit-content;
					padding: 10 15rpx;
					border-radius: 8rpx;
					color: red;
					margin-left: 15rpx;
					padding: 0 10rpx;
				}
			}

			.namebox {
				max-width: 230rpx;
				-webkit-line-clamp: 1;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.butbox {
				background: linear-gradient(267deg, #F94D29 0%, #F99529 100%);
				width: fit-content;
				padding: 15rpx 30rpx;
				color: #FFF;
				border-radius: 36rpx;
				font-size: 28rpx;
			}
		}
	}

	// 隐藏的二维码
	.hide_ewm {
		width: 607rpx;
		// height: 727rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 40rpx 70rpx 38rpx 70rpx;
		box-sizing: border-box;
		// position: fixed;
		// left: 50%;
		// top: 50%;
		// transform: translate(-50%, -50%);
		display: flex;
		// flex-direction: column;
		justify-content: space-between;
		align-items: center;

		.scroll-Y {
			height: 700rpx;

			.scroll-view-item {
				height: 426rpx;
				// line-height: 426rpx;
				text-align: center;
				font-size: 36rpx;
				image{
					width: 426rpx;
					height: 426rpx;
				}
			}
		}

		.shut {
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			top: 46rpx;
			right: 32rpx;
		}

		.title_box {
			height: 128rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 33rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #222222;
		}

		.line {
			width: 100%;
			height: 2rpx;
			background: #EEEEEE;
		}

		.ewm {
			width: 426rpx;
			height: 426rpx;
		}

		.number {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 0 24rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;

			:first-child {
				color: #666666;
			}

			:last-child {
				color: #333333;
			}
		}
	}
</style>